<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }

        div:first-child{
            height: 50px;
            line-height: 50px;
            border-bottom: 1px solid black;
            padding-left: 50px;
        }
        span{
            font-size: 24px;
            color: red;
            font-weight: bold;
            margin-left: 10px;
        }
        div:last-child{
            width: 800px;
            height: 450px;
            margin: 50px;
            border: 1px solid black;
        }
        img{
            position: relative;
            left: 0px;
        }
    </style>
    <script>
        window.onload=function(){
            //1.获取元素
            var btns=document.getElementsByTagName('button');
            var imgs=document.images;
            var span=document.getElementsByTagName('span')[0];
            //2.给手动移动绑定事件
            btns[0].onclick=function(){
                imgs[0].style.left=imgs[0].offsetLeft+10+'px';
                if(imgs[0].offsetLeft>=680){
                    imgs[0].style.left='700px';

                }
            }
            //3.发射
            btns[1].onclick=function(){
                
                var id=setInterval(function(){
                    span.innerHTML=--span.innerHTML;
                    if(span.innerHTML<=0){
                        clearInterval(id);
                        imgs[0].style.left='200px';
                    }
                },1000);
            }
            //4.赛跑
            btns[2].onclick=function(){
                
                var id=setInterval(function(){
                    var random1=parseInt(Math.random()*20);
                    var random2=parseInt(Math.random()*20);
                    imgs[0].style.left=imgs[0].offsetLeft+random1+'px';
                    imgs[1].style.left=imgs[1].offsetLeft+random2+'px';
                    if(imgs[0].offsetLeft>=680 || imgs[1].offsetLeft>=680){
                        clearInterval(id);
                        if(imgs[0].offsetLeft>720){
                            alert('tanke1胜利');
                        }else{
                            alert('tanke2胜利');
                        }
                    }
                },100);
            }
            //自动移动
            function run(){
                var id0=setInterval(function(){
                    imgs[0].style.left=imgs[0].offsetLeft+10+'px';
                    if(imgs[0].offsetLeft>680){
                        clearInterval(id0);
                        imgs[0].src='./归档/坦克练习 间歇和超时调用/tanke_down.jpg';
                        var id1=setInterval(function(){
                            imgs[0].style.top=imgs[0].offsetTop+10+'px';
                            if(imgs[0].offsetTop>350){
                                clearInterval(id1);
                                imgs[0].src='./归档/坦克练习 间歇和超时调用/tanke_left.jpg';
                                var id2=setInterval(function(){
                                    imgs[0].style.left=parseInt(imgs[0].style.left)-10+'px';
                                    if(imgs[0].offsetLeft<80){
                                        clearInterval(id2);
                                        imgs[0].src='./归档/坦克练习 间歇和超时调用/tanke_up.jpg';
                                        var id3=setInterval(function(){
                                            imgs[0].style.top=parseInt(imgs[0].style.top)-10+'px';
                                            if(imgs[0].offsetTop<120){
                                                clearInterval(id3);
                                                imgs[0].src='./归档/坦克练习 间歇和超时调用/tanke_right.jpg';
                                                //setTimeout(run,100);
                                                run();
                                            }
                                        },100);
                                    }
                                   
                                },100);
                            }
                            
                        },100);
                    }

                },100);
            }
            btns[3].onclick=run;
        }
            
    </script>
</head>
<body>
    <div>
        <button>手动移动</button>
        <button>发射</button>
        <button>赛跑</button>
        <button>自动移动</button>
        <span>5</span>
</div>
    <div>
        <img src="./归档/坦克练习 间歇和超时调用/tanke_right.jpg" alt="">
        <br>
        <img src="./归档/坦克练习 间歇和超时调用/tanke_right.jpg" alt="">
    </div>
</body>
</html>